<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>前端监控SDK</title>
</head>

<body>
  <div id="container">
    <div class="content">
      <input type="button" value="点击抛出错误" onclick="btnClick()" />
      <input type="button" value="点击抛出promise错误" onclick="btnPromiseClick()" />
      <input type="button" value="发起ajax成功请求" onclick="sendAjaxSuccess()" />
      <input type="button" value="发起ajax失败请求" onclick="sendAjaxError()" />
      <div class="content" style="width:600px;height:600px;word-wrap:break-word;">
        <input />
        <button id="longTaskBtn">执行longTask</button>
      </div>
    </div>
  </div>
  <script>
    let longTaskBtn = document.getElementById('longTaskBtn');
    longTaskBtn.addEventListener('click', longTask);
    function longTask() {
      let start = Date.now();
      console.log('longTask开始 start', start);
      while (Date.now() < (200 + start)) { }
      console.log('longTask结束 end', (Date.now() - start));
    }
  </script>
  <script>
    let content = document.getElementsByClassName('content')[0];
    setTimeout(() => {
      let h1 = document.createElement('h1');
      h1.innerHTML = '我是最有重要的内容';
      h1.setAttribute('elementtiming', 'meaningful');
      content.appendChild(h1);
    }, 2000);
  </script>
  <script>
    function btnClick() {
      window.someVariable.error = 'someVariable';
    }
    function btnPromiseClick() {
      new Promise(function (resolve, reject) {
        console.log(someVar.some);
      });
    }
  </script>
  <script>
    function sendAjaxSuccess() {
      let xhr = new XMLHttpRequest;
      xhr.open('GET', '/success', true);
      xhr.responseType = 'json';
      xhr.onload = function () {
        console.log(xhr.response);
      }
      xhr.send();
    }
    function sendAjaxError() {
      let xhr = new XMLHttpRequest;
      xhr.open('POST', '/error', true);
      xhr.responseType = 'json';
      xhr.onload = function () {
        console.log(xhr.response);
      }
      xhr.onerror = function (error) {
        console.log(error);
      }
      xhr.send("name=abi");
    }
  </script>
  <script src="error.js"></script>
</body>

</html>